@mainColor: #2196f3;
.fullScreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
}
.globalSearchWrap {
  .fullScreen;
  z-index: 99;
  .inputWrap {
    position: absolute;
    top: 20px;
    left: 50%;
    width: 600px;
    transform: translateX(-50%);
    transition: width 0.2s ease-out;
    input {
      box-sizing: border-box;
      width: 100%;
      padding: 0 60px 0 40px;
      height: 54px;
      border-radius: 3px;
      outline: none;
      border: none;
      box-shadow: 0px 2px 6px 1px rgba(0,0,0,0.16);
    }
    input::-webkit-input-placeholder {
      color: #bdbdbd;
    }
    &.hasResult {
      width: 1000px;
      input {
        border-radius: 3px 3px 0 0;
      }
    }
    & > .icon {
      position: absolute;
      top: 18px;
      color: #9e9e9e;
      cursor: pointer;
      &:not(.searchIcon):hover {
        color: @mainColor;
      }
    }
    .searchIcon {
      left: 9px;
    }
    .hrefIcon {
      right: 44px;
      top: 20px !important;
    }
    .emptyIcon {
      right: 16px;
    }
  }
  .dialogSearchContent {
    width: 600px;
    position: absolute;
    top: 74px;
    left: 50%;
    transform: translateX(-50%);
    height: calc(~'100vh - 94px');
    background: #fff;
    border-top: 1px solid #E5E5E5;
    opacity: 0;
    transition: width 0.2s ease-out;
    &.easeWidth {
      opacity: 1;
      width: 1000px;
    }
  }
}
